<template>
  <div v-loading="loading" class="app-container">
    <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width="96px">
      <div class="header_title_box">
        <h2>基本信息</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="账单月份" prop="bill_time">
                <el-date-picker v-model="formFieldsData.bill_time" type="month" value-format="MM" placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="客户" prop="company_id">
                <el-select v-model="formFieldsData.company_id" clearable filterable>
                  <el-option v-for="item in companys" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="仓库" prop="warehouse_id">
                <el-select v-model="formFieldsData.warehouse_id" multiple clearable filterable>
                  <el-option v-for="item in warehouses" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>卸货费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="discharge_number">
                <el-input-number v-model="formFieldsData.discharge_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="discharge_fee">
                <el-input v-model="formFieldsData.discharge_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('discharge')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>入库验收费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="check_number">
                <el-input-number v-model="formFieldsData.check_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="check_fee">
                <el-input v-model="formFieldsData.check_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('check')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>标准订单出库服务费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="outbound_service_number">
                <el-input-number v-model="formFieldsData.outbound_service_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="outbound_service_fee">
                <el-input v-model="formFieldsData.outbound_service_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('outbound_service')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>拒收/退货入库服务费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="return_number">
                <el-input-number v-model="formFieldsData.return_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="return_fee">
                <el-input v-model="formFieldsData.return_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('return')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>打托费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="pallet_number">
                <el-input-number v-model="formFieldsData.pallet_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="pallet_fee">
                <el-input v-model="formFieldsData.pallet_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('pallet')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="header_title_box">
        <h2>贴标签费</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-row :gutter="36">
            <el-col :span="6" :offset="0">
              <el-form-item label="商品数量" prop="label_number">
                <el-input-number v-model="formFieldsData.label_number" :precision="0" :min="1" :max="9999999999" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="单价" prop="label_fee">
                <el-input v-model="formFieldsData.label_fee" />
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-form-item label="总价">
                <el-input :value="getTotalPrice('label')" :disabled="true" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { validPrice } from '../../../../utils/validate'
export default {
  name: 'DischargeCargoFeeAdd',
  filters: {
    totalPrice(formFieldsData, key) {
      const number = formFieldsData[`${key}_number`]
      const price = formFieldsData[`${key}_fee`]
      return validPrice(price) ? this.$computed(number, price) : ''
    }
  },
  data() {
    return {
      id: '',
      loading: false,
      info: {},
      formName: 'dischargeCargoFee',
      formFieldsData: {
        bill_time: '', // 月份
        company_id: '', // 客户
        warehouse_id: '', // 仓库
        discharge_number: 1, // 卸货数量
        discharge_fee: '', // 卸货单价
        check_number: 1, // 入库验收商品数量
        check_fee: '', // 入库验收单价
        outbound_service_number: 1, // 标准订单出库服务商品数量
        outbound_service_fee: '', // 标准订单出库服务单价
        return_number: 1, // 拒收/退货入库商品数量
        return_fee: '', // 拒收/退货入库单价
        pallet_number: 1, // 打托商品数量
        pallet_fee: '', // 打托单价
        label_number: 1, // 贴标商品数量
        label_fee: '' // 贴标单价
      },
      rules: {
        bill_time: [{ required: true, message: '请选择月份', trigger: 'blur' }], // 月份
        company_id: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ], // 客户
        warehouse_id: [
          { required: true, message: '请选择仓库', trigger: "['blur', 'change']" }
        ], // 仓库
        discharge_number: [
          { required: true, message: '请输入卸货数量', trigger: 'blur' }
        ], // 卸货数量
        discharge_fee: [
          { required: true, message: '请输入卸货单价', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('卸货单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ], // 卸货单价
        check_number: [
          { required: true, message: '请输入入库验收数量', trigger: 'blur' }
        ], // 入库验收商品数量
        check_fee: [
          { required: true, message: '请输入入库验收单价', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('入库验收单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ], // 入库验收单价
        outbound_service_number: [
          {
            required: true,
            message: '请输入标准订单出库服务商品数量',
            trigger: 'blur'
          }
        ], // 标准订单出库服务商品数量
        outbound_service_fee: [
          {
            required: true,
            message: '请输入标准订单出库服务单价',
            trigger: 'blur'
          },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('服务单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ], // 标准订单出库服务单价
        return_number: [
          {
            required: true,
            message: '请输入拒收/退货入库商品数量',
            trigger: 'blur'
          }
        ], // 拒收/退货入库商品数量
        return_fee: [
          {
            required: true,
            message: '请输入拒收/退货入库单价',
            trigger: 'blur'
          },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('入库单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ], // 拒收/退货入库单价
        pallet_number: [
          { required: true, message: '请输入打托商品数量', trigger: 'blur' }
        ], // 打托商品数量
        pallet_fee: [
          { required: true, message: '请输入打托单价', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('打托单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ], // 打托单价
        label_number: [
          { required: true, message: '请输入贴标商品数量', trigger: 'blur' }
        ], // 贴标商品数量
        label_fee: [
          { required: true, message: '请输入贴标单价', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (!validPrice(value)) {
                callback(new Error('贴标单价必须是数字且保留两位小数'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ] // 贴标单价
      },
      companys: [], // 客户列表
      warehouses: [], // 实体仓列表
      btnLoading: false
    }
  },
  watch: {
    $route(router) {
      this.checkRouterHasId(router)
    }
  },
  created() {
    const vm = this
    vm.checkRouterHasId(vm.$route)
    vm.getCompanys() // 获取客户列表
    vm.getWarehouses() // 获取实体仓列表
  },
  methods: {
    getTotalPrice(key) {
      const number = this.formFieldsData[`${key}_number`]
      const price = this.formFieldsData[`${key}_fee`]
      return validPrice(price) ? this.$computed.accMul(number, price) : ''
    },
    // 检查路由是否有id
    checkRouterHasId(router) {
      const vm = this
      const id = router.params.id
      if (id) {
        vm.id = id
        vm.getInfo()
      }
    },
    // 客户列表
    getCompanys() {
      const vm = this
      const params = {
        page: 1,
        limit: 100000000,
        is_status: 1
      }
      vm.$http.get('/company', { params }).then((res) => {
        vm.companys = res.data
      })
    },
    // 获取实体仓列表
    getWarehouses() {
      const vm = this
      const params = {
        page: 1,
        limit: 100000000,
        type: 2,
        is_active: 1
      }
      vm.$http.get('/warehouse', { params }).then((res) => {
        vm.warehouses = res.data
      })
    },
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      vm.$http
        .get(`/discharge-cargo-fee/${vm.id}`)
        .then((res) => {
          vm.info = res.data
          vm.formFieldsData.bill_time = vm.info.bill_time // 月份
          vm.formFieldsData.company_id = vm.info.company_id // 客户
          vm.formFieldsData.warehouse_id = vm.info.warehouse_id.toString().split(',').map(e => +e) // 仓库
          vm.formFieldsData.discharge_number = vm.info.discharge_number // 卸货数量
          vm.formFieldsData.discharge_fee = vm.info.discharge_fee // 卸货单价
          vm.formFieldsData.check_number = vm.info.check_number // 入库验收商品数量
          vm.formFieldsData.check_fee = vm.info.check_fee // 入库验收单价
          vm.formFieldsData.outbound_service_number = vm.info.outbound_service_number // 标准订单出库服务商品数量
          vm.formFieldsData.outbound_service_fee = vm.info.outbound_service_fee // 标准订单出库服务单价
          vm.formFieldsData.return_number = vm.info.return_number // 拒收/退货入库商品数量
          vm.formFieldsData.return_fee = vm.info.return_fee // 拒收/退货入库单价
          vm.formFieldsData.pallet_number = vm.info.pallet_number // 打托商品数量
          vm.formFieldsData.pallet_fee = vm.info.pallet_fee // 打托单价
          vm.formFieldsData.label_number = vm.info.label_number // 贴标商品数量
          vm.formFieldsData.label_fee = vm.info.label_fee // 贴标单价
          vm.loading = false
        })
        .catch(() => {
          vm.loading = false
        })
    },
    // 取消
    handleCancel() {
      const vm = this
      vm.$refs[vm.formName].resetFields()
      vm.$router.push({ path: '/settlement/dischargeCargoFee' })
    },
    // 提交
    handleSubmit() {
      const vm = this
      vm.$refs[vm.formName].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, vm.formFieldsData)
          params.warehouse_id = params.warehouse_id.join(',')
          vm.id ? vm.edit(params) : vm.add(params)
        }
      })
    },
    // 添加
    add(params) {
      const vm = this
      vm.btnLoading = true
      vm.$http
        .post('/discharge-cargo-fee', params)
        .then((res) => {
          vm.$message.success('添加成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch(() => {
          vm.btnLoading = false
        })
    },
    // 编辑
    edit(params) {
      const vm = this
      vm.$http
        .put(`/discharge-cargo-fee/${vm.id}`, params)
        .then((res) => {
          vm.$message.success('编辑成功')
          vm.handleCancel()
          vm.btnLoading = false
        })
        .catch(() => {
          vm.btnLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container .filter-container {
  padding-bottom: 0;
  border: none;
}
</style>
